---
title: 'Event modal plugin'
description: 'Display more information about events in a modal.'
---

# Event modal

If your events have more information than just their time and a short title, chances are it would be helpful to
display information about the events in a modal.

## Install

```bash copy
npm i @schedule-x/event-modal
```

## Usage

```js
import { createEventModalPlugin } from '@schedule-x/event-modal'

const eventModal = createEventModalPlugin()

const calendar = createCalendar({
  // ...other configuration
  plugins: [eventModal],
})

eventModal.close(); // close the modal
```

## Methods

### `close`

Close the modal programmatically.

## Customization

If you're using one of the framework adapter components, like for React, you can customize modal content via passing
`customComponents` prop like so:

```tsx copy
import { useCalendarApp } from '@schedule-x/react'
import { createEventModalPlugin } from '@schedule-x/event-modal'

const customComponents = {
  eventModal: ({ calendarEvent }) => {
    return (
      <div
        style={{
          padding: "40px",
          background: "yellow",
          color: "black",
          borderRadius: "24px",
          border: "1px solid black",
          fontSize: "24px",
          fontWeight: "bold",
        }}
      >
        {calendarEvent.title}
      </div>
    );
  },
}

function CalendarComponent() {
  const calendar = useCalendarApp({
    // ...other configuration

    plugins: [createEventModalPlugin()],
  })

  return <>
    <ScheduleXCalendar
      customComponents={customComponents}
      calendarApp={calendar}
    />
  </>
}
```
